<!DOCTYPE html>
<html>
<head>
	<title>Sortable Table using Polymer Web Components</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="../../platform/platform.js" debug log="bind,ready,events"></script>
	<link rel="import" href="../sortable-table.html">
	<link rel="import" href="fruit-icon.html">
	<link rel="import" href="index-links.html">

	<style shim-shadowdom>
		sortable-table { width: 500px; margin-left: 65px; }
		sortable-table::shadow td.column-alice,
		sortable-table::shadow td.column-bill,
		sortable-table::shadow td.column-casey,
		sortable-table::shadow td.column-average,
		sortable-table::shadow td.column-total {
			text-align: right;
			padding-right: 5px;
			width: 100px;
			vertical-align: middle;
		}
	</style>
</head>
<body unresolved>

	<h2>CSS</h2>

	All columns are Column names

	<style shim-shadowdom>
		::shadow .sortable-table-td-alice {
			width: 75px;
			text-align: right;
		}
		::shadow .sortable-table-td-bill {
			width: 75px;
			text-align: right;
		}
		::shadow .sortable-table-td-casey {
			width: 75px;
			text-align: right;
		}
		::shadow .sortable-table-td-average {
			font-weight: bold;
			width: 100px;
			text-align: right;
		}
		::shadow tr:nth-of-type(even) .sortable-table-td-average {
			background-color: rgba(0,132,180,0.15);
		}
		::shadow tr:nth-of-type(odd) .sortable-table-td-average {
			background-color: rgba(0,132,180,0.05);
		}
		::shadow .sortable-table-td-total {
			font-weight: bold;
			width: 100px;
			text-align: right;
		}
		::shadow tr:nth-of-type(even) .sortable-table-td-total {
		
		}
	</style>

		<sortable-table defaultStyle>
			<sortable-column name="fruit" cellTemplate="fruitsTemplate">Fruit</sortable-column>
			<sortable-column name="alice">Alice</sortable-column>
			<sortable-column name="bill">Bill</sortable-column>
			<sortable-column name="casey">Casey</sortable-column>
			<sortable-column name="average" formula="function(row){ return Math.round((row.alice + row.bill + row.casey)/3*10)/10; }">Average</sortable-column>
			<sortable-column name="total" formula="function(row){ return row.alice + row.bill + row.casey; }">Total</sortable-column>

			<template id="fruitsTemplate">
				<td style="text-align:left;vertical-align:middle;width:250px;">
					<fruit-icon fruit="{{value}}"></fruit-icon>
					{{value}}
				</td>
			</template>

			[
				{fruit: 'apple', alice: 4, bill: 10, casey: 2 },
				{fruit: 'banana', alice: 0, bill: 4, casey: 0 },
				{fruit: 'grape', alice: 2, bill: 3, casey: 5 },
				{fruit: 'pear', alice: 4, bill: 2, casey: 8 },
				{fruit: 'strawberry', alice: 0, bill: 14, casey: 0 },
				{fruit: 'apple', alice: 5, bill: 6, casey: 4 },
				{fruit: 'banana', alice: 3, bill: 9, casey: 2 },
				{fruit: 'grape', alice: 8, bill: 3, casey: 0 },
				{fruit: 'pear', alice: 0, bill: 7, casey: 4 },
				{fruit: 'strawberry', alice: 4, bill: 5, casey: 2 }
			]
		</sortable-table>
	</div>

	<index-links page="css.html"></index-links>
</body>
</html>